<template>
  <div>
    <el-table :data="activityList" highlight-current-row class="el-table-style">
      <el-table-column type="index" width="75" sortable></el-table-column>
      <el-table-column label="图片/视频" width="200" sortable>
        <template slot-scope="scope">
          <el-image class="imgs" :src="scope.row.img_url"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="display_area_name" width="150" label="展示区域" sortable></el-table-column>
      <el-table-column prop="sort" label="排序" width="100" sortable></el-table-column>
      <el-table-column prop="img_url" label="链接" min-width="120" sortable>
        <template slot-scope="scope">
         <el-button type="danger" class="danger-btn" size="mini" @click="CopyUrl(scope.row.img_url)">复制</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="100">
        <template slot-scope="scope">
          <el-button type="primary" class="danger-btn" size="mini" @click="bannerSet(scope.row.id)">编辑</el-button>
          <el-button type="danger" class="danger-btn" size="mini" @click="delBanner(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-col :span="24" class="footer-bar">
      <div class="page-code">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pagesize"
          @current-change="currentChange"
        ></el-pagination>
      </div>
    </el-col>
    <!--    添加按钮-->
    <Bannerdialog ref="bannerdialog"></Bannerdialog>
  </div>
</template>

<script>
    import Bannerdialog from "./bannerdialog";
    export default {
      name: "banner",
      components: {Bannerdialog},
      data(){
        return {
          activityList : [],
          tabtitle: '添加banner',
          total: 0,
          page_id: 1,
          pagesize: 10,
        }
      },
      mounted(){
        this.getBannerList();
        this.addFormVisible = false;
      },
      methods: {
        //获取banner列表
        async getBannerList(){
          let params = {
            page : this.page_id,
            limit : this.pagesize
          }
          const res = await this.$api.getBannerList(params);
          if (res.data.level == 'success'){
            this.activityList = res.data.data;
            this.total = res.data.page_info.total;
          }else {
            this.$message({
              message: res.data.message,
              type: 'warning'
            })
          }
        },
        //获取banner详情
        async bannerSet(id){
          this.tabtitle = "编辑banner";
          let params = {
            id : id
          }
          const res = await this.$api.bannerSet(params);
          if (res.data.level == 'success'){
            this.$refs.bannerdialog.bannerValue = res.data.data;
            this.$refs.bannerdialog.addFormVisible = true;

          }

        },
        //设置banner
        async setBanner(){
          let params = this.$refs.bannerdialog.bannerValue;
          const res = await this.$api.setBanner(params);
          if (res.data.level == 'success'){
            this.$message({
              message: res.data.message,
              type: 'success'
            });
            this.getBannerList();
            this.tabtitle = '添加banner';
            this.$refs.bannerdialog.addFormVisible = false;
          }else {
            this.$message({
              message: res.data.message,
              type: 'warning'
            })
          }
        },
        //删除banner
        async delBanner(id){
          let params = {
            id : id
          }
          const res = await this.$api.delBanner(params);
          if (res.data.level == 'success'){
            this.$message({
              message: res.data.message,
              type: 'success'
            });
            this.getBannerList();
          }else {
            this.$message({
              message: res.data.message,
              type: 'warning'
            })
          }
        },
        //分页按钮显示
        currentChange(id){
          this.page_id = id;
          this.getBannerList();
        },
        CopyUrl(data){
          let url = data;
          let oInput = document.createElement('input');
          oInput.value = url;
          document.body.appendChild(oInput);
          oInput.select(); // 选择对象;
          console.log(oInput.value)
          document.execCommand("Copy"); // 执行浏览器复制命令
          this.$message({
            message: '已成功复制到剪切板',
            type: 'success'
          });
          oInput.remove()
        }
      }
    }
</script>

<style scoped>
</style>
<style>
  .imgs{
    height: 150px;
  }
  .imgs img{
    height: 100%;
    width: auto;
  }
</style>
